<script lang="ts" setup>
import { onMounted } from 'vue'
onMounted(() => {
  // 创建地图实例
  var map = new window.BMapGL.Map('container')

  // 设置中心点（深圳市的经纬度）
  var point = new window.BMapGL.Point(114.085947, 22.547)

  // 设置中心点坐标和缩放级别
  /**
   * 级别越大，实际范围越小，但是表示的范围越清晰
   * 级别越小，实际范围越大，但是表示的范围越宽广
   */
  map.centerAndZoom(point, 18)

  var scaleCtrl = new window.BMapGL.ScaleControl() // 添加比例尺控件
  map.addControl(scaleCtrl)
  var zoomCtrl = new window.BMapGL.ZoomControl() // 添加缩放控件
  map.addControl(zoomCtrl)
  var cityCtrl = new window.BMapGL.CityListControl() // 添加城市列表控件
  map.addControl(cityCtrl)

  // 创建自定义覆盖物DOM
  function createDOM (feature) {
    const img = document.createElement('img')
    img.style.height = '240px'
    img.style.width = '80px'
    img.src =
      'https://preview.qiantucdn.com/58pic/20220318/00e58PIC58PICXc7d58PIC2EuSfc6_PIC2018_PIC2018.jpg%21w1024_new_small'
    img.draggable = false
    return img
  }

  // 创建自定义覆盖物
  const customOverlay = new window.BMapGL.CustomOverlay(createDOM, {
    point: new window.BMapGL.Point(114.096, 22.546),
    opacity: 0.5,
    map: map,
    offsetY: -10,
    properties: {
      title: 'this is a title',
      size: '100'
    }
  })

  // 将自定义覆盖物添加到地图上
  map.addOverlay(customOverlay)
})
</script>

<template>
  <div class="map-container" id="container"></div>
</template>

<style scoped>
.map-container {
  height: 100%;
}
</style>
